<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>对象的扩展</title>
  </head>
  <body>
    <script>
      // 1、属性的简洁表示法
      // 1.1、属性的写法
      // ES5 的写法
      // var foo = 'Vue';
      // var obj = {
      //   foo: foo
      // };
      // console.log(obj.foo); // Vue

      // ES6 的写法（属性名和属性值同名时，可以只写一个属性名）
      // const foo = 'React';
      // const obj = {
      //   foo
      // };
      // console.log(obj.foo); // React

      // 1.2、对象的写法
      // ES5的写法
      // var obj = {
      //   name: '张三',
      //   skill: function () {
      //     console.log('打桌球');
      //   }
      // };
      // obj.skill(); // 打桌球

      // ES6 的写法（函数可以省略 :function）
      // const obj = {
      //   name: '李四',
      //   skill() {
      //     console.log('游泳');
      //   }
      // };
      // obj.skill(); // 游泳

      // 2、Object.assign()  // 对象合并
      const target = {
        a: 1,
        b: 2
      };
      const obj = {
        b: 3,
        c: 4
      };
      const newObj = Object.assign(target, obj);
      console.log('newObj--', newObj);
    </script>
  </body>
</html>
